<template>
  <view class="callback-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 提示文本 -->
    <view class="tips-text">
      <text>我们还有许多需要改进的地方，如果您对平台的服务、管理流程有自己的见解或者对于平台有其他的期待，欢迎通过下方给我们留言哦～</text>
      <text>如遇系统故障、功能异常等紧急问题还请通过"上单客服"进行反馈，以便您的问题得到及时解决。</text>
    </view>

    <!-- 反馈内容输入框 -->
    <view class="feedback-input">
      <textarea 
        v-model="content" 
        placeholder="请留言......" 
        maxlength="500"
        :adjust-position="false"
      ></textarea>
    </view>

    <!-- 联系人信息 -->
    <view class="contact-info">
      <view class="input-item">
        <text class="label">联系人</text>
        <input 
          type="text" 
          v-model="contactName" 
          placeholder="请输入联系人姓名"
          maxlength="20"
        />
      </view>
      <view class="input-item">
        <text class="label">手机号</text>
        <input 
          type="number" 
          v-model="contactPhone" 
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @tap="submitFeedback">提交反馈</button>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      content: '',
      contactName: '',
      contactPhone: ''
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 提交反馈
    async submitFeedback() {
      if (!this.content.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        })
        return
      }

      if (!this.contactName.trim()) {
        uni.showToast({
          title: '请输入联系人姓名',
          icon: 'none'
        })
        return
      }

      if (!this.contactPhone.trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }

      // 验证手机号格式
      if (!/^1[3-9]\d{9}$/.test(this.contactPhone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '提交中...'
      })

      try {
        // 提交反馈
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/feedback/feedback`,
          method: 'POST',
          data: {
            userId: uni.getStorageSync('userInfo').memberId,
            content: this.content,
            contactName: this.contactName,
            contactPhone: this.contactPhone
          },
          header: {
            'Content-Type': 'application/json',
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })

          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(result.data.msg || '提交失败')
        }
      } catch (err) {
        console.error('提交反馈失败:', err)
        uni.showToast({
          title: err.message || '提交失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '4000-908-608'
      })
    },

    // 联系客服
    contactService() {
      // 跳转到在线客服页面或打开客服会话
      uni.navigateTo({
        url: '/pages/service/online'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.callback-container {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 120rpx;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .right {
      width: 88rpx;
    }
  }

  .tips-text {
    margin-top: 20rpx;
    padding: 30rpx;
    
    text {
      display: block;
      font-size: 28rpx;
      color: #666666;
      line-height: 1.6;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .feedback-input {
    margin: 20rpx 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 20rpx;
    
    textarea {
      width: 100%;
      height: 300rpx;
      font-size: 28rpx;
      color: #333333;
      line-height: 1.5;
      
      &::placeholder {
        color: #999999;
      }
    }
  }

  .contact-info {
    margin: 20rpx 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 20rpx;

    .input-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #F5F5F5;

      &:last-child {
        border-bottom: none;
      }

      .label {
        width: 120rpx;
        font-size: 28rpx;
        color: #333333;
      }

      input {
        flex: 1;
        font-size: 28rpx;
        color: #333333;

        &::placeholder {
          color: #999999;
        }
      }
    }
  }

  .submit-btn {
    margin: 60rpx 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #2B85E4;
    color: #FFFFFF;
    font-size: 32rpx;
    border-radius: 44rpx;
    border: none;
  }

  .contact-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background: #FFFFFF;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .contact-item {
      flex: 1;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:first-child {
        border-right: 2rpx solid #EEEEEE;
      }
      
      .iconfont {
        font-size: 36rpx;
        color: #2B85E4;
        margin-right: 10rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}
</style> 